<template>
  <div>
    <alert v-model="show" title="提示" @on-show="onShow" @on-hide="onHide">{{message}}</alert>
    <Yq-header :needBack="needBack" :needLeft="needLeft" :needRight="needRight" :rightCallback="rightCallback" slot="header" v-if="isShowHeader" ref="header">
      <p slot="content">{{title}}</p>
      <p slot="rightContent" v-if="needRight">{{rightContent}}</p>
      <p slot="leftContent" v-if="needLeft">{{leftContent}}</p>
    </Yq-header>
    <group gutter="0" style="padding-top: 38px;">
      <flexbox :gutter="0" orient="vertical">
        <flexbox-item>
          <group gutter="0">
            <flexbox :gutter="0">
              <flexbox-item style="padding-left: 5px;" :span="1"><span style="color: red">*</span></flexbox-item>
              <flexbox-item style="margin-left: -30px;"><x-input title="关系类型:" v-model="relation" type="text" placeholder="请输入关系类型"></x-input></flexbox-item>
            </flexbox>
          </group>
        </flexbox-item>
        <flexbox-item>
          <group gutter="0">
            <flexbox :gutter="0">
              <flexbox-item style="padding-left: 5px;" :span="1"><span style="color: red">*</span></flexbox-item>
              <flexbox-item style="margin-left: -30px;"><x-input title="姓名:" v-model="name"  is-type="text" placeholder="请输入被提醒人姓名"></x-input></flexbox-item>
            </flexbox>
          </group>
        </flexbox-item>
        <flexbox-item>
          <group gutter="0">
            <flexbox :gutter="0">
              <flexbox-item style="padding-left: 5px;" :span="1"><span style="color: red">*</span></flexbox-item>
              <flexbox-item style="margin-left: -30px;">
                <datetime v-model="birthday" placeholder="请选择生日" :min-year=1900 :max-year="endDate" title="生日" cancel-text="取消" confirm-text="确定"></datetime>
              </flexbox-item>
            </flexbox>
          </group>
        </flexbox-item>
      </flexbox>
    </group>
  </div>
</template>

<script>
  import { Group, Cell, XInput, PopupPicker, Picker, XButton, XTextarea, Checklist, Flexbox, FlexboxItem, Alert, Datetime } from 'vux'
//  import * as types from '../../../../store/types'
  import * as urls from '../../../../api/urls'
  import YqHeader from '../../../../components/YqHeader.vue'

  export default {
    components: {
      PopupPicker,
      Group,
      Picker,
      XButton,
      Cell,
      XInput,
      XTextarea,
      Checklist,
      Flexbox,
      FlexboxItem,
      Alert,
      Datetime,
      YqHeader
    },
    data () {
      return {
        isShowHeader: true,
        title: '新增关系',
        rightContent: '保存',
        needBack: true,
        needRight: true,
        needLeft: false,
        leftContent: '',
        show: false,
        message: '',
        relation: '',
        name: '',
        birthday: '',
        startDate: 1900,
        endDate: 2017
      }
    },
    methods: {
      weixinfn28 () {
        let that = this
        let userId = this.$store.state.userInfo.id
        let logo = this.$store.state.empower.LOGO
        let url = window.location.origin
        let link = url + '/api/wxAuth/index?type=t1' + '&uid=' + userId
        that.$wechat.onMenuShareAppMessage({
          title: '孝行通', // 分享标题
          desc: '孝行通·微商城 一个让子女为父母尽孝的老年服务平台', // 分享描述
          link: link, // 分享链接
          imgUrl: logo, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
        that.$wechat.onMenuShareTimeline({
          title: '孝行通', // 分享标题
          link: link, // 分享链接
          imgUrl: logo, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
      },
      onHide () {
        if (this.message === '新增生日提醒成功' || this.message === '修改成功') {
          this.$router.go(-1)
        }
      },
      onShow () {
        console.log('on show')
      },
      mentionUpdate () {
        let isUpdate = this.$route.query.typeId
        if (this.relation === '' || this.relation === null || this.relation === undefined ||
          this.name === '' || this.name === null || this.name === undefined ||
          this.birthday === '' || this.birthday === null || this.birthday === undefined) {
          this.show = true
          this.message = '输入信息不完整，请填写后重新提交'
          return
        } else {
          let userId = this.$store.state.userInfo.id
          let that = this
          that.http(urls.mentionUpdate, {id: isUpdate, customerId: userId, relation: that.relation, name: that.name, bithStr: that.birthday}, function (res) {
            if (res.status === 100) {
              if (isUpdate) {
                that.show = true
                that.message = '修改成功'
              } else {
                that.show = true
                that.message = '新增生日提醒成功'
              }
            } else {
              that.show = true
              that.message = res.errMsg
            }
          }, function (res) {
            that.show = true
            that.message = '服务器错误，请稍后重试'
          })
        }
      },
      getMentionInfo (mentionId) {
        let userId = this.$store.state.userInfo.id
        let that = this
        that.http(urls.getMention, {userId: userId, id: mentionId}, function (res) {
          if (res.status === 100) {
            console.log(res.data.mention)
            that.name = res.data.mention[0].name
            that.relation = res.data.mention[0].relation
            that.birthday = (res.data.mention[0].birthday).substr(0, 10)
          } else {
            that.show = true
            that.message = res.errMsg
          }
        }, function (res) {
          that.show = true
          that.message = '服务器错误，请稍后重试'
        })
      },
      setEndDate () {
        let myDate = new Date()
        this.endDate = myDate.getFullYear()
//        let seperator1 = '-'
//        let month = myDate.getMonth() + 1
//        let strDate = myDate.getDate()
//        if (month >= 1 && month <= 9) {
//          month = '0' + month
//        }
//        if (strDate >= 0 && strDate <= 9) {
//          strDate = '0' + strDate
//        }
//        this.endDate = myDate.getFullYear() + seperator1 + month + seperator1 + strDate
//        console.log(this.endDate)
      },
      rightCallback () {
        this.mentionUpdate()
      }
    },
    mounted () {
      if (this.$route.query.typeId) {
        this.title = '编辑关系'
        this.getMentionInfo(this.$route.query.typeId)
      }
      this.setEndDate()
      this.weixinfn28()
    }
  }
</script>

<style scoped="scoped">
  .weui-cells_checkbox .weui-check:checked + .vux-checklist-icon-checked:before{
    color: #FF9900 !important;
  }
  .flex-demo {
    text-align: center;
    color: #fff;
    background-color: #20b907;
    border-radius: 4px;
    background-clip: padding-box;
  }
</style>
